<style scoped lang="less">
</style>
<template>
	<div class="partition-new">
		<el-form :inline="true" class="filter-blk mb-10">
			<el-form-item class="ml-10">
				<el-input placeholder="请输入位置名称" v-model.trim="name"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button :loading="loading" type="primary" @click="newAction" :disabled="!$store.getters.hasEditPermission"><i class="iconfont icon-add"></i> 快速添加</el-button>
			</el-form-item>
		</el-form>
		<el-table 
			:data="dataList" 
			style="width: 100%"
			v-loading="loading">
		    <el-table-column prop="partitionName" label="分区"></el-table-column>
		    <el-table-column prop="name" label="位置"></el-table-column>
		    <el-table-column prop="sortid" label="排序"></el-table-column>
		    <el-table-column label="操作" width="130">
		    	<template slot-scope="scope">
		    		<div class="nowrap">
			    		<el-button type="blue" @click="eidtAction(scope.row)" :disabled="!$store.getters.hasEditPermission">编辑</el-button>
			    		<el-button type="red" @click="deleteAction(scope.row,scope.$index)" :disabled="!$store.getters.hasEditPermission">删除</el-button>
		    		</div>	
		    	</template>
		    </el-table-column>
		</el-table>

		<!-- 位置编辑 start -->
		<el-dialog v-if="editModalVisible" title="编辑位置" :visible.sync="editModalVisible" width="300px" :close-on-click-modal="false" :close-on-press-escape="false" destroy-on-close append-to-body>
			<el-form ref="editForm" :model="editForm" label-width="100px">
				<el-form-item label="名称：" prop="name" :rules="[{ required: true, message: '请填写位置名称', trigger: 'change' }]">
					<el-input placeholder="请输入" v-model.trim="editForm.name"></el-input>
				</el-form-item>
				<!-- <el-form-item label="排序：">
					<el-input placeholder="请输入" v-model.trim="editForm.sort"></el-input>
				</el-form-item> -->
				<el-form-item class="text-right">
					<el-button :loading="saving" type="primary" @click="saveAction">保存</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
		<!-- 位置编辑 end -->
	</div>
</template>
<script>

import { mapState } from 'vuex'
export default {
	name: 'partitionNew',
	props: {
		partition: {
			type: Object,
			default () {
				return {}
			}
		}
	},
	computed: {
		...mapState([
			'siteInfos'
		]),
	},
	watch: {},
	data () {
		return {
			dataList:[],
			loading: false,
			adding: false,
			name: '',
			editModalVisible: false,
			editForm:{},
			saving: false,
			seatModalVisible: false
		}
	},
	methods: {
		getData () {
			this.$get('/check/businessSeat/businessSeatListPage',{partitionId: this.partition.id}).then(res => {
				this.dataList = res.data.Items.map(item=>{
					if(!item.partitionName){
						item.partitionName = this.partition.name
						item.partitionId = this.partition.id
					}
					return item
				})
			}, (err) =>{
				if(err.msg){
					this.$message.error(err.msg);
				}
			})
		},
		newAction () {
			if(!this.name){
				this.$message.error('请输入位置名称');
				return
			}
			this.$post('/check/businessSeat/businessSeatAdd',{partitionId: this.partition.id, name: this.name}).then( data => {
				this.adding = false
				this.$message({
					type: 'success',
					message: '添加成功',
					center: true
				})
				this.getData()
				this.$emit('update')
			}, error => {
				this.adding = false
				if(error.msg){
					this.$message.error(error.msg);
				}
			})
		},
		eidtAction (item) {
			this.editForm = {
				id:item.id,
				name: item.name,
				partitionId: item.partitionId
			}
			this.editModalVisible = true
		},
		saveAction () {
			this.$refs['editForm'].validate((valid) => {
				if (valid) {
					this.saving = true
					this.$post('/check/businessSeat/businessSeatUpdate',this.editForm).then( data => {
						this.saving = false
						this.$message({
							type: 'success',
							message: '保存成功',
							center: true
						})
						this.editModalVisible = false
						this.getData()
						this.$emit('update')
					}, error => {
						this.saving = false
						if(error.msg){
							this.$message.error(error.msg);
						}
					})
				}
			})
		},
		deleteAction (item,index) {
			this.showConfirm ('确定删除该位置？',()=>{
				this.deleting = true
				this.$post('/check/businessSeat/businessSeatDelete', {
					id: item.id
				}).then(res => {
					this.deleting = false
					this.$message.success('删除成功')
					this.dataList.splice(index,1)
					this.$emit('update')
					// this.getData(this.currentPage)
				}, (err) =>{
					this.deleting = false
					this.$message.error(err.msg)
				})
			})
		},
		seatAction (item) {
			this.seatModalVisible = true
		}
	},
	created () {
		this.getData()
	},
}
</script>